<template>
  <client-only>
    <el-drawer
      class="child-page-drawer"
      modal-class="child-page-drawer-modal"
      v-bind="$attrs"
      v-model="drawer"
      @closed="onDrawerClosed"
    >
      <template #header>
        <!-- <span>菜单详情</span> -->
        <slot name="header"></slot>
      </template>
      <NuxtPage />
    </el-drawer>
    <KeepAlive include=""></KeepAlive>
  </client-only>
</template>

<script setup lang="ts">
type MatchPattern = string | RegExp | (string | RegExp)[];

interface Props {
  include?: MatchPattern;
  exclude?: MatchPattern;
}

const props = withDefaults(defineProps<Props>(), {});

const drawer = ref(getDrawerValue());

function getDrawerValue(route) {
  route = route || useRoute();
  if (props.include) {
    let { include } = props;
    if (!Array.isArray(include)) {
      include = [include];
    }

    return include.some((v) => {
      if (typeof v === 'string') {
        return route.name === v;
      }
      if (v instanceof RegExp) {
        return v.test(<string>route.name);
      }
    });
  }

  if (props.exclude) {
    let { exclude } = props;
    if (!Array.isArray(exclude)) {
      exclude = [exclude];
    }

    return !exclude.some((v) => {
      if (typeof v === 'string') {
        return route.name === v;
      }
      if (v instanceof RegExp) {
        return v.test(<string>route.name);
      }
    });
  }
}
onBeforeRouteUpdate((updateGuard) => {
  // console.log(
  //   '🚀 ~ file: child-page-drawer.vue:76 ~ onBeforeRouteUpdate ~ updateGuard:',
  //   updateGuard,
  //   useRoute().name,
  // );
  drawer.value = getDrawerValue(updateGuard);
});
function onDrawerClosed() {
  if (getDrawerValue()) {
    // 关闭抽屉后修复路由，
    useRouter().back();
  }
}
</script>

<style scoped lang="scss">
// .child-page-drawer-modal {
//   // 约束子页面抽屉在父页面内
//   position: absolute;
// }
</style>
<style lang="scss">
.child-page-drawer-modal {
  // 约束子页面抽屉在父页面内
  position: absolute;
}
</style>
